<template>
  <div class="add-wrap" v-loading="loading">
    <Breadcrumb :titles="titles"></Breadcrumb>
    <div class="body">
      <div class="project">
        <el-form
          :model="basicForm"
          label-position="top"
          :rules="basicRules"
          ref="basicFormRef"
        >
          <el-row :gutter="24">
            <el-col :sm="24" :md="24" :lg="12" :xl="12">
              <!-- 政策信息或基础信息 -->
              <div class="project-part">
                <div
                  class="project-part-title project-part-title1"
                >
                  政策信息或基础信息
                </div>
                <div class="project-part-content">
                  <el-row :gutter="24">
                    <el-col
                      :sm="24"
                      :md="24"
                      :lg="24"
                      :xl="24"
                    >
                      <el-form-item
                        label="政策名称"
                        prop="name"
                      >
                        <el-input
                          class="auto-input"
                          v-model="basicForm.name"
                          :disabled="isDetail"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col
                      :sm="24"
                      :md="24"
                      :lg="12"
                      :xl="12"
                    >
                      <el-form-item
                        label="政策文号"
                        prop="policyNumber"
                      >
                        <el-input
                          v-model="basicForm.policyNumber"
                          :disabled="isDetail"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col
                      :sm="24"
                      :md="24"
                      :lg="12"
                      :xl="12"
                    >
                      <el-form-item
                        label="政策级别"
                        prop="policyLevel"
                      >
                        <el-select
                          placeholder=""
                          v-model="basicForm.policyLevel"
                          clearable
                          :disabled="isDetail"
                          filterable
                        >
                          <el-option
                            v-for="item in policyLevelOptions"
                            :key="item.dictValue"
                            :label="item.dictText"
                            :value="item.dictValue"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col
                      :sm="24"
                      :md="24"
                      :lg="12"
                      :xl="12"
                    >
                      <el-form-item
                        label="发文部门"
                        prop="policyDepart"
                      >
                        <el-select
                          placeholder=""
                          v-model="basicForm.policyDepart"
                          clearable
                          :disabled="isDetail"
                          filterable
                        >
                          <el-option
                            v-for="item in policyDepartOptions"
                            :key="item.dictValue"
                            :label="item.dictText"
                            :value="item.dictValue"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col
                      :sm="24"
                      :md="24"
                      :lg="12"
                      :xl="12"
                    >
                      <el-form-item
                        label="政策类型"
                        prop="policyType"
                      >
                        <el-select
                          placeholder=""
                          v-model="basicForm.policyType"
                          clearable
                          :disabled="isDetail"
                          filterable
                        >
                          <el-option
                            v-for="item in policyTypeOptions"
                            :key="item.dictValue"
                            :label="item.dictText"
                            :value="item.dictValue"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col
                      :sm="24"
                      :md="24"
                      :lg="12"
                      :xl="12"
                    >
                      <el-form-item
                        label="扶持政策类型"
                        prop="supportPolicyType"
                      >
                        <el-select
                          placeholder=""
                          v-model="
                            basicForm.supportPolicyType
                          "
                          clearable
                          :disabled="isDetail"
                          filterable
                        >
                          <el-option
                            v-for="item in supportPolicyTypeOptions"
                            :key="item.dictValue"
                            :label="item.dictText"
                            :value="item.dictValue"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col
                      :sm="24"
                      :md="24"
                      :lg="12"
                      :xl="12"
                    >
                      <el-form-item
                        label="扶持金额"
                        prop="supportCharge"
                      >
                        <el-input
                          v-model="basicForm.supportCharge"
                          :disabled="isDetail"
                          ><template slot="append"
                            >万元</template
                          ></el-input
                        >
                      </el-form-item>
                    </el-col>
                    <el-col
                      :sm="24"
                      :md="24"
                      :lg="12"
                      :xl="12"
                    >
                      <el-form-item
                        label="产业类型"
                        prop="industryType"
                      >
                        <el-select
                          placeholder=""
                          v-model="basicForm.industryType"
                          clearable
                          :disabled="isDetail"
                          filterable
                        >
                          <el-option
                            v-for="item in industryTypeOptions"
                            :key="item.dictValue"
                            :label="item.dictText"
                            :value="item.dictValue"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col
                      :sm="24"
                      :md="24"
                      :lg="12"
                      :xl="12"
                    >
                      <el-form-item
                        label="申报日期"
                        prop="time"
                      >
                        <el-date-picker
                          v-model="basicForm.time"
                          :disabled="isDetail"
                          type="daterange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          value-format="yyyy-MM-dd"
                        >
                        </el-date-picker>
                      </el-form-item>
                    </el-col>
                    <el-col
                      :sm="24"
                      :md="24"
                      :lg="12"
                      :xl="12"
                    >
                      <el-form-item
                        label="发布日期"
                        prop="publishTime"
                      >
                        <el-date-picker
                          v-model="basicForm.publishTime"
                          type="date"
                          :disabled="isDetail"
                          value-format="yyyy-MM-dd"
                        >
                        </el-date-picker>
                      </el-form-item>
                    </el-col>
                    <el-col
                      :sm="24"
                      :md="24"
                      :lg="12"
                      :xl="12"
                    >
                      <el-form-item
                        label="启用/禁用"
                        prop="status"
                      >
                        <el-radio-group
                          v-model="basicForm.status"
                          :disabled="isDetail"
                        >
                          <el-radio label="启用"
                            >启用</el-radio
                          >
                          <el-radio label="禁用"
                            >禁用</el-radio
                          >
                        </el-radio-group>
                      </el-form-item>
                    </el-col>
                    <el-col
                      :sm="24"
                      :md="24"
                      :lg="24"
                      :xl="24"
                    >
                      <el-form-item
                        label="政策标签"
                        prop="policyTag"
                      >
                        <el-checkbox-group
                          v-model="basicForm.policyTag"
                          :disabled="isDetail"
                        >
                          <el-checkbox
                            v-for="item in policyTagOptions"
                            :label="item"
                            :key="item"
                            >{{ item }}</el-checkbox
                          >
                        </el-checkbox-group>
                      </el-form-item>
                    </el-col>
                    <el-col
                      :sm="24"
                      :md="24"
                      :lg="24"
                      :xl="24"
                    >
                      <el-form-item
                        label=""
                        prop="policyOtherTag"
                      >
                        <el-input
                          class="auto-input"
                          placeholder="请输入政策标签，如：荣誉资质、知识产权"
                          v-model="basicForm.policyOtherTag"
                          :disabled="isDetail"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col
                      :sm="24"
                      :md="24"
                      :lg="12"
                      :xl="12"
                    >
                      <el-form-item
                        label="政策相关附件材料"
                        prop="fileRelList"
                      >
                        <UploadVue
                          class="file-upload"
                          v-model="basicForm.fileRelList"
                          :disabled="isDetail"
                          :showFileList="true"
                          :showProgress="true"
                        />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </el-col>
            <!-- 政策内容 -->
            <el-col :sm="24" :md="24" :lg="12" :xl="12">
              <div
                class="project-part"
                style="height: 800px"
              >
                <div
                  class="project-part-title project-part-title1"
                >
                  政策内容
                </div>
                <div
                  class="project-part-content"
                  style="height: calc(100% - 40px)"
                >
                  <quill-editor
                    style="height: calc(100% - 90px)"
                    v-model="basicForm.policyContent"
                    ref="myQuillEditor"
                  ></quill-editor>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="line" v-show="!isDetail">
      <el-button @click="saveInfo" class="save-btn"
        >保存</el-button
      >
    </div>
  </div>
</template>

<script>
import Breadcrumb from '@/components/breadcrumb'
import UploadVue from '@/components/upload'
import {
  addProjectInfo,
  queryProjectDetail
} from '@/api/PolicyManage'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import { getDictOptions } from '@/utils/dict'

export default {
  props: {
    pkid: String,
    title: String,
    isEdit: {
      type: Boolean,
      default: false
    },
    isDetail: {
      type: Boolean,
      default: false
    }
  },
  components: {
    Breadcrumb,
    UploadVue,
    quillEditor
  },
  data() {
    return {
      basicForm: {
        pkid: '',
        name: '',
        policyNumber: '',
        policyLevel: '',
        policyDepart: '',
        policyType: '',
        supportPolicyType: '',
        supportCharge: '',
        industryType: '',
        time: [],
        startTime: '',
        endTime: '',
        publishTime: '',
        status: '',
        policyTag: [],
        policyOtherTag: '',
        policyContent: '',
        fileRelList: []
      },
      basicRules: {
        name: [
          {
            required: true,
            message: '请输入政策名称',
            trigger: 'blur'
          }
        ],
        policyLevel: [
          {
            required: true,
            message: '请选择政策级别',
            trigger: 'blur'
          }
        ],
        policyDepart: [
          {
            required: true,
            message: '请选择发文部门',
            trigger: 'blur'
          }
        ],
        policyType: [
          {
            required: true,
            message: '请选择政策类型',
            trigger: 'blur'
          }
        ],
        publishTime: [
          {
            required: true,
            message: '请选择发布日期',
            trigger: 'blur'
          }
        ],
        status: [
          {
            required: true,
            message: '请选择状态',
            trigger: 'blur'
          }
        ]
      },
      loading: false,
      policyLevelOptions: [],
      policyDepartOptions: [],
      policyTypeOptions: [],
      supportPolicyTypeOptions: [],
      industryTypeOptions: [],
      policyTagOptions: [
        '荣誉资质',
        '知识产权',
        '科技企业',
        '成果转化',
        '研发机构',
        '营商环境',
        '企业减负',
        '商贸服务',
        '品牌建设',
        '生产服务',
        '其他'
      ]
    }
  },
  computed: {
    titles() {
      return [this.title]
    }
  },
  watch: {},
  mounted() {
    this.initOptions()
    if (this.isEdit) {
      this.getDetailInfo()
    }
  },
  methods: {
    async initOptions() {
      const data = await getDictOptions(
        'zhjs_policy_zcjb,zhjs_policy_fwbm,zhjs_policy_zclx,zhjs_policy_fc_zclx,zhjs_policy_cylx'
      )
      this.policyLevelOptions = data.filter(
        (i) => i.dictCode === 'zhjs_policy_zcjb'
      )[0].resourceDictItems
      this.policyDepartOptions = data.filter(
        (i) => i.dictCode === 'zhjs_policy_fwbm'
      )[0].resourceDictItems
      this.policyTypeOptions = data.filter(
        (i) => i.dictCode === 'zhjs_policy_zclx'
      )[0].resourceDictItems
      this.supportPolicyTypeOptions = data.filter(
        (i) => i.dictCode === 'zhjs_policy_fc_zclx'
      )[0].resourceDictItems
      this.industryTypeOptions = data.filter(
        (i) => i.dictCode === 'zhjs_policy_cylx'
      )[0].resourceDictItems
    },
    // 获取项目详情
    getDetailInfo() {
      this.loading = true
      queryProjectDetail(this.pkid).then((res) => {
        if (res.success) {
          res.data.baseInfo.policyTag = res.data.baseInfo
            .policyTag
            ? res.data.baseInfo.policyTag.split(',')
            : []
          if (
            res.data.baseInfo.startTime &&
            res.data.baseInfo.endTime
          ) {
            res.data.baseInfo.time = [
              res.data.baseInfo.startTime,
              res.data.baseInfo.endTime
            ]
          } else {
            res.data.baseInfo.time = []
          }
          this.basicForm = {
            ...res.data.baseInfo,
            fileRelList: res.data.fileRelList
          }
        }
        this.loading = false
      })
    },

    // 保存信息
    saveInfo() {
      this.$refs.basicFormRef.validate((res) => {
        if (res) {
          const data = JSON.parse(
            JSON.stringify(this.basicForm)
          )
          const fileRelList = []
          data.fileRelList.forEach((item) => {
            fileRelList.push({
              fileId: item.response.data,
              pkid: item.pkid
            })
          })
          delete data.fileRelList
          if (data.time && data.time.length > 0) {
            data.startTime = data.time[0]
            data.endTime = data.time[1]
          }
          data.policyTag = data.policyTag.join(',')
          const formData = {
            baseInfo: { ...data },
            fileRelList: fileRelList
          }

          addProjectInfo(formData).then((res) => {
            if (res.success) {
              this.$message.success('保存成功')
              this.$router.push({
                path: '/wisdomIndustry/PolicyCalculator/PolicyManage/list',
                query: { refresh: Date.now() }
              })
            } else {
              this.$message.error(res.message)
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/css/form.scss';
.add-wrap {
  .auto-input {
    width: calc(100% - 50px) !important;
    ::v-deep {
      .el-input__inner {
        width: 100% !important;
      }
    }
  }
  ::v-deep .file-upload {
    .el-upload {
      position: absolute;
      left: 240px;
      top: -45px;
    }
  }
  ::v-deep {
    p {
      margin: 10px;
    }

    .edit_container,
    .quill-editor {
      height: 300px;
    }

    .ql-snow .ql-picker.ql-size .ql-picker-label::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item::before {
      content: '14px';
    }
    s
      .ql-snow
      .ql-picker.ql-size
      .ql-picker-label[data-value='small']::before,
    .ql-snow
      .ql-picker.ql-size
      .ql-picker-item[data-value='small']::before {
      content: '10px';
    }
    .ql-snow
      .ql-picker.ql-size
      .ql-picker-label[data-value='large']::before,
    .ql-snow
      .ql-picker.ql-size
      .ql-picker-item[data-value='large']::before {
      content: '18px';
    }
    .ql-snow
      .ql-picker.ql-size
      .ql-picker-label[data-value='huge']::before,
    .ql-snow
      .ql-picker.ql-size
      .ql-picker-item[data-value='huge']::before {
      content: '32px';
    }

    .ql-snow .ql-picker.ql-header .ql-picker-label::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item::before {
      content: '文本';
    }
    .ql-snow
      .ql-picker.ql-header
      .ql-picker-label[data-value='1']::before,
    .ql-snow
      .ql-picker.ql-header
      .ql-picker-item[data-value='1']::before {
      content: '标题1';
    }
    .ql-snow
      .ql-picker.ql-header
      .ql-picker-label[data-value='2']::before,
    .ql-snow
      .ql-picker.ql-header
      .ql-picker-item[data-value='2']::before {
      content: '标题2';
    }
    .ql-snow
      .ql-picker.ql-header
      .ql-picker-label[data-value='3']::before,
    .ql-snow
      .ql-picker.ql-header
      .ql-picker-item[data-value='3']::before {
      content: '标题3';
    }
    .ql-snow
      .ql-picker.ql-header
      .ql-picker-label[data-value='4']::before,
    .ql-snow
      .ql-picker.ql-header
      .ql-picker-item[data-value='4']::before {
      content: '标题4';
    }
    .ql-snow
      .ql-picker.ql-header
      .ql-picker-label[data-value='5']::before,
    .ql-snow
      .ql-picker.ql-header
      .ql-picker-item[data-value='5']::before {
      content: '标题5';
    }
    .ql-snow
      .ql-picker.ql-header
      .ql-picker-label[data-value='6']::before,
    .ql-snow
      .ql-picker.ql-header
      .ql-picker-item[data-value='6']::before {
      content: '标题6';
    }

    .ql-snow .ql-picker.ql-font .ql-picker-label::before,
    .ql-snow .ql-picker.ql-font .ql-picker-item::before {
      content: '标准字体';
    }
    .ql-snow
      .ql-picker.ql-font
      .ql-picker-label[data-value='serif']::before,
    .ql-snow
      .ql-picker.ql-font
      .ql-picker-item[data-value='serif']::before {
      content: '衬线字体';
    }
    .ql-snow
      .ql-picker.ql-font
      .ql-picker-label[data-value='monospace']::before,
    .ql-snow
      .ql-picker.ql-font
      .ql-picker-item[data-value='monospace']::before {
      content: '等宽字体';
    }
  }
}
</style>
